<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>工序(PU)详情</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="container header-content">
          <div class="logo">订单管理系统</div>
          <div style="position: absolute; left: 50%;">
            <el-button type="primary" size="large" @click="openMenu('../../index.html')">
              首页
            </el-button>
            <el-dropdown size="large" @command="openMenu">
              <el-button type="primary" size="large">
                业务中心<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in businessCenters" :command="item.path">{{item.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="user-info" v-if="currentUser.name">
            欢迎，{{ currentUser.name }}
            <el-button type="primary" size="mini" @click="exit(2)">登出</el-button>
          </div>
        </div>
      </div>
      <div class="container main-content">
        <div class="content" style="width: 100%">

          <h1 class="module-title">基本信息</h1>
          <div class="center-grid mb-20">
            <el-descriptions :column="4">
              <el-descriptions-item v-for="item in baseInfoHeader" :key="item.fieldApi" :label="item.label">
                <div>{{ formInfo[item.fieldApi] ? formInfo[item.fieldApi]:'-' }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <h1 class="module-title">输入信息</h1>
          <div class="center-grid mb-20">
            <el-row class="mb8" >
              <el-col :span="1" :push="0">
                  <el-button type="primary" plain size="mini" @click="addComponent('1')">新增部件</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="componentTableLoading" :data="componentTableDataInput" stripe style="width: 100%">
              <el-table-column v-for="(item, index) in componentColumnData" :key="index" :label="item.fieldName" min-width="150">
                <template slot-scope="scope">
                  <template v-if="item.fieldApi==='componentUnit'">{{ getOptionsStr('base_component_unit',scope.row[item.fieldApi]) }}</template>
                  <template v-else-if="item.fieldApi==='componentAttribute'">{{ getOptionsStr('component_attribute',scope.row[item.fieldApi]) }}</template>
                  <template v-else-if="item.fieldApi==='componentNum'">1</template>
                  <template v-else> {{ scope.row[item.fieldApi] }} </template>
                </template>
              </el-table-column>
              <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  @click="handleUpdate('../productionBase/component_list.html')">修改</el-button>
                  <el-button size="mini" type="text"  @click="delData(scope.row,0)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

            <div class="center-grid mb-20">
              <el-row class="mb8" >
                <el-col :span="1" :push="0">
                    <el-button type="primary" plain size="mini" @click="addTool">新增工具/工装</el-button>
                </el-col>
              </el-row>
                <el-table v-loading="toolTableLoading" :data="toolTableData" stripe style="width: 100%">
                  <el-table-column v-for="(item, index) in toolColumnData" :key="index" :label="item.fieldName" min-width="150">
                    <template slot-scope="scope">
                      <template v-if="item.fieldApi==='type'">{{ getOptionsStr('base_tools_type',scope.row[item.fieldApi]) }}</template>
                      <template v-else-if="item.fieldApi==='toolNum'">
                        <el-input v-model="scope.row[item.fieldApi]" @blur="handleToolNumChange(scope.row)" size="mini" style="width: 80px" />
                      </template>
                      <template v-else> {{ scope.row[item.fieldApi] }} </template>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text"  @click="handleUpdate('../productionBase/tool_list.html')">修改</el-button>
                      <el-button size="mini" type="text"  @click="delData(scope.row,1)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
            
            <div class="center-grid mb-20">
              <el-row class="mb8" >
                <el-col :span="1" :push="0">
                    <el-button type="primary" plain size="mini" @click="addAccessories">新增辅料</el-button>
                </el-col>
              </el-row>
              <el-table v-loading="AccessoriesTableLoading" :data="AccessoriesTableData" stripe style="width: 100%">
                <el-table-column v-for="(item, index) in AccessoriesColumnData" :key="index" :label="item.fieldName" min-width="150">
                  <template slot-scope="scope">
                    <template v-if="item.fieldApi==='type'">{{ getOptionsStr('base_accessories_type',scope.row[item.fieldApi]) }}</template>
                    <template v-else-if="item.fieldApi==='accessoriesNum'">
                      <el-input v-model="scope.row[item.fieldApi]" @blur="handleAccessoriesNumChange(scope.row)" size="mini" style="width: 80px" />
                    </template>
                    <template v-else> {{ scope.row[item.fieldApi] }} </template>
                  </template>
                </el-table-column>
                <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                  <template slot-scope="scope">
                      <el-button size="mini" type="text"  @click="handleUpdate('../productionBase/accessories_list.html')">修改</el-button>
                      <el-button size="mini" type="text"  @click="delData(scope.row,2)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          <h1 class="module-title">输出信息</h1>
          <div class="center-grid mb-20">
            <el-row class="mb8" >
              <el-col :span="1" :push="0">
                  <el-button type="primary" plain size="mini" @click="addComponent('2')">新增部件</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="componentTableLoading" :data="componentTableDataOutput" stripe style="width: 100%">
              <el-table-column v-for="(item, index) in componentColumnData" :key="index" :label="item.fieldName" min-width="150">
                <template slot-scope="scope">
                  <template v-if="item.fieldApi==='componentUnit'">{{ getOptionsStr('base_component_unit',scope.row[item.fieldApi]) }}</template>
                  <template v-else-if="item.fieldApi==='componentAttribute'">{{ getOptionsStr('component_attribute',scope.row[item.fieldApi]) }}</template>
                  <template v-else-if="item.fieldApi==='componentNum'">1</template>
                  <template v-else> {{ scope.row[item.fieldApi] }} </template>
                </template>
              </el-table-column>
              <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                <template slot-scope="scope">
                      <el-button size="mini" type="text"  @click="handleUpdate('../productionBase/component_list.html')">修改</el-button>
                      <el-button size="mini" type="text"  @click="delData(scope.row,0)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <h1 class="module-title">作业指导书</h1>
          <div class="center-grid mb-20">
            <el-upload
              class="upload-demo"
              :action="request_host + '/system/pu/upload'"
              :headers="headers"
              :data="{ puCode: detailId }"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :limit="1"
              name="file">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <!-- 添加文件列表显示 -->
            <div v-if="fileList.length > 0" class="file-list">
              <div v-for="(file, index) in fileList" :key="index" class="file-item">
                <span class="file-name">{{ file.name }}</span>
                <el-button type="text" @click="handleDownload(file)">下载</el-button>
                <el-button type="text" @click="handleDeleteFile(file)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog title="新增部件" :visible.sync="openComponentDia" :fullscreen="true" width="800px" append-to-body>
        <el-table v-loading="componentTableLoading" :data="chooseComponentTable" @selection-change="selectionComponentChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column v-for="(item, index) in chooseComponentColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
              <template slot-scope="scope">
                <template v-if="item.fieldApi==='componentUnit'">{{ getOptionsStr('base_component_unit',scope.row[item.fieldApi]) }}</template>
                <template v-else> {{ scope.row[item.fieldApi] }} </template>
              </template>
          </el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addComponentData">确 定</el-button>
        <el-button @click="cancleAdd">取 消</el-button>
      </div>
      </el-dialog>

      <el-dialog title="新增工具/工装" :visible.sync="openToolDia" :fullscreen="true" width="800px" append-to-body>
        <el-table v-loading="toolTableLoading" :data="chooseToolTable" @selection-change="selectionToolChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column v-for="(item, index) in chooseToolColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
              <template slot-scope="scope">
                <template v-if="item.fieldApi==='type'">{{ getOptionsStr('base_tools_type',scope.row[item.fieldApi]) }}</template>
                <template v-else> {{ scope.row[item.fieldApi] }} </template>
              </template>
          </el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addToolData">确 定</el-button>
        <el-button @click="cancleAdd">取 消</el-button>
      </div>
      </el-dialog>

      <el-dialog title="新增辅料" :visible.sync="openAccessoriesDia" :fullscreen="true" width="800px" append-to-body>
        <el-table v-loading="AccessoriesTableLoading" :data="chooseAccessoriesTable" @selection-change="selectionAccessoriesChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column v-for="(item, index) in chooseAccessoriesColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
              <template slot-scope="scope">
                <template v-if="item.fieldApi==='type'">{{ getOptionsStr('base_accessories_type',scope.row[item.fieldApi]) }}</template>
                <template v-else> {{ scope.row[item.fieldApi] }} </template>
              </template>
          </el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAccessoriesData">确 定</el-button>
        <el-button @click="cancleAdd">取 消</el-button>
      </div>
      </el-dialog>

    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script>
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            businessCenters: [
                { name: '订单中心', path: '../index.html' },
                { name: '用户中心', path: '#' },
                { name: '产品中心', path: '#' },
                { name: '库存中心', path: '#' },
                { name: '财务中心', path: '#' },
                { name: '数据中心', path: '#' },
                { name: '系统中心', path: '#' },
                { name: '消息中心', path: '#' }
            ],
            baseInfoHeader: [
              { label: '工序编号', fieldApi: 'puCode' },
              { label: '工序名称', fieldApi: 'puName'},
              { label: '工序时长(分钟)', fieldApi: 'puDuration'},
              { label: '归属部门', fieldApi: 'departmentCode'},
            ],
            dicts: ['base_component_unit','base_tools_type','base_accessories_type','component_attribute'],
            optionsObj: [],
            // 选中数组
            ids: [],
            formInfo: {},
            detailDialog: false, // 详情
            detailId: '',
            root_host: root_host,
            request_host: request_host,
            openComponentDia: false,
            openToolDia: false,
            addComponentFlag: '1',
            componentColumnData: [
              {
                fieldName: 'ID',
                fieldApi: 'id',
                width:'60'
              },
              {
                fieldName: '部件编号',
                fieldApi: 'componentCode',
                width:'180'
              },
              {
                fieldName: '部件名称',
                fieldApi: 'componentName'
              },
              // {
              //   fieldName: '批次',
              //   fieldApi: 'batchNo'
              // },
              {
                fieldName: '供应商',
                fieldApi: 'supplier'
              },
              // {
              //   fieldName: '唯一码',
              //   fieldApi: 'qrCode'
              // },
              {
                fieldName: '部件属性',
                fieldApi: 'componentAttribute'
              },
              {
                fieldName: '数量',
                fieldApi: 'componentNum'
              },
              {
                fieldName: '单位',
                fieldApi: 'componentUnit'
              }
            ],
            componentTableDataInput: [],
            componentTableDataOutput: [],
            componentTableLoading: false,
            toolColumnData: [
              {
                fieldName: '工具/工装编号',
                fieldApi: 'toolCode',
                width:'220'
              },
              {
                fieldName: '工具/工装类型',
                fieldApi: 'type'
              },
              {
                fieldName: '工具/工装名称',
                fieldApi: 'toolName'
              },
              {
                fieldName: '数量',
                fieldApi: 'toolNum',
                width: '100'
              }
            ],
            toolTableData: [],
            toolTableLoading: false,
            AccessoriesColumnData: [
              {
                fieldName: '辅料编号',
                fieldApi: 'accessoriesCode',
                width:'220'
              },
              {
                fieldName: '辅料类型',
                fieldApi: 'type'
              },
              {
                fieldName: '辅料名称',
                fieldApi: 'accessoriesName'
              },
              {
                fieldName: '数量',
                fieldApi: 'accessoriesNum',
                width: '100'
              }
            ],
            AccessoriesTableData: [],
            AccessoriesTableLoading: false,
            chooseComponentTable: [],
            chooseComponentTotal: 0,
            queryParams: {
              pageNo: 1,
              pageSize: 10,
              puCode: '',
              puName: ''
            },
            chooseComponentColumnData: [
              {
                fieldName: '部件编号',
                fieldApi: 'componentCode'
              },
              {
                fieldName: '部件名称',
                fieldApi: 'componentName'
              },
              // {
              //   fieldName: '批次',
              //   fieldApi: 'batchNo'
              // },
              {
                fieldName: '供应商',
                fieldApi: 'supplier'
              },
              // {
              //   fieldName: '唯一码',
              //   fieldApi: 'qrCode'
              // },
              {
                fieldName: '单位',
                fieldApi: 'componentUnit'
              }
            ],
            chooseToolColumnData: [
            {
                fieldName: '工具/工装编号',
                fieldApi: 'toolCode'
              },
              {
                fieldName: '工具/工装类型',
                fieldApi: 'type'
              },
              {
                fieldName: '工具/工装名称',
                fieldApi: 'toolName'
              },
              {
                fieldName: '备注',
                fieldApi: 'remark'
              }
            ],
            chooseToolTable: [],
            chooseToolTotal: 0,
            openAccessoriesDia: false,
            chooseAccessoriesTable: [],
            chooseAccessoriesTotal: 0,
            chooseAccessoriesColumnData: [
            {
                fieldName: '辅料编号',
                fieldApi: 'accessoriesCode'
              },
              {
                fieldName: '辅料类型',
                fieldApi: 'type'
              },
              {
                fieldName: '辅料名称',
                fieldApi: 'accessoriesName'
              },
              {
                fieldName: '备注',
                fieldApi: 'remark'
              }
            ],
            // 上传相关
            fileList: [],
            headers: {}
          }
        },
        created() {
          this.init()
        },
        methods: {
          exit,
          init() {
            this.detailId = getUrlParameter('id')
            this.getOptions()
            this.getDetails()
            this.getComponentList()
            this.getToolList()
            this.getAccessoriesList()
          },
          getDetails() {
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/pu/` + this.detailId)
                .then(response => {
                    this.formInfo = response.data.data
                    // 如果有文件，设置文件列表
                    if (this.formInfo.puFile) {
                      // 从完整路径中提取文件名
                      const fileName = this.formInfo.puFile.substring(this.formInfo.puFile.lastIndexOf('/') + 1);
                      this.fileList = [{
                        name: fileName,
                        url: this.formInfo.puFile
                      }]
                    }
                });
          },
          getOptions() {
                this.dicts.forEach((item) => {
                    axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                        this.$set(this.optionsObj, item, {})
                        if (response.status == 200) {
                            response.data.data.map((item1) => {
                                this.optionsObj[item][item1.dictValue] = item1.dictLabel
                            })
                        }
                    })
                })
          },
          getOptionsStr(opt, value) {
              if (this.optionsObj[opt] && value) {
                  return this.optionsObj[opt][value]
              }
              return ''
          },
          getComponentList() {
            const componentParamesInput = {
              puCode: this.detailId,
              componentAttribute: '1' //输入
            }
            axios.post(`${this.request_host}/system/pu/queryComponentsByPuId`,componentParamesInput).then((response) => {
                if (response.status == 200) {
                  this.componentTableDataInput = response.data.rows
                }
              });
            const componentParamesOutput = {
              puCode: this.detailId,
              componentAttribute: '2' //输出
            }
            axios.post(`${this.request_host}/system/pu/queryComponentsByPuId`,componentParamesOutput).then((response) => {
                if (response.status == 200) {
                  this.componentTableDataOutput = response.data.rows
                }
              })
          },
          getToolList() {
            axios.get(`${this.request_host}/system/pu/queryToolsByPuId?puCode=`+this.detailId).then((response) => {
                if (response.status == 200) {
                  this.toolTableData = response.data.rows
                }
              })
          },
          getAccessoriesList() {
            axios.get(`${this.request_host}/system/pu/queryAccessoriesByPuId?puCode=`+this.detailId).then((response) => {
                if (response.status == 200) {
                  this.AccessoriesTableData = response.data.rows
                }
              })
          },
          addComponent(val){
            this.openComponentDia = true
            axios.get(`${this.request_host}/system/component/list`,{ params: this.queryParams }).then((response) => {
                if (response.status == 200) {
                  this.chooseComponentTable = response.data.rows
                  this.chooseComponentTotal = response.data.total
                }
              });
              this.addComponentFlag = val
          },
          // 多选框选中数据
          selectionComponentChange(selection) {
              this.ids = selection.map(item => item.componentCode)
          },
          // 添加关联部件数据
          addComponentData(){
            const addComponentParams = {
              id: this.detailId,
              ids: this.ids,
              type: 0,
              componentAttribute: this.addComponentFlag
            }
            axios.post(`${this.request_host}/system/pu/addPuRelationData`,addComponentParams).then((response) => {
                if (response.status == 200) {
                  this.getComponentList()
                  this.cancleAdd()
                }
              })
          },
          cancleAdd(){
            this.ids = []
            this.openComponentDia = false
            this.openToolDia = false
            this.openAccessoriesDia = false
          },
          // 多选框选中数据
          selectionToolChange(selection) {
              this.ids = selection.map(item => item.toolCode)
          },
          addTool(){
            this.openToolDia = true
            axios.get(`${this.request_host}/system/tools/list`,{ params: this.queryParams }).then((response) => {
                if (response.status == 200) {
                  this.chooseToolTable = response.data.rows
                  this.chooseToolTotal = response.data.total
                }
              })
          },
          // 添加关联工具数据
          addToolData(){
            const addToolParams = {
              id: this.detailId,
              ids: this.ids,
              type: 1
            }
            axios.post(`${this.request_host}/system/pu/addPuRelationData`,addToolParams).then((response) => {
                if (response.data.code == 200) {
                  this.getToolList()
                  this.cancleAdd()
                }else{
                  this.$message.error(response.data.msg);
                }
              })
          },
          addAccessories(){
            this.openAccessoriesDia = true
            axios.get(`${this.request_host}/system/accessories/list`,{ params: this.queryParams }).then((response) => {
                if (response.status == 200) {
                  this.chooseAccessoriesTable = response.data.rows
                  this.chooseAccessoriesTotal = response.data.total
                }
              })
          },
          selectionAccessoriesChange(selection){
            this.ids = selection.map(item => item.accessoriesCode)
          },
          addAccessoriesData(){
            const addAccessoriesParams = {
              id: this.detailId,
              ids: this.ids,
              type: 2
            }
            axios.post(`${this.request_host}/system/pu/addPuRelationData`,addAccessoriesParams).then((response) => {
                if (response.data.code == 200) {
                  this.getAccessoriesList()
                  this.cancleAdd()
                }else{
                  this.$message.error(response.data.msg);
                }
              })
          },
          handleUpdate(url){
            // 修改跳转到对应列表页
            window.open(url)
          },
          // 删除pu关联数据
          delData(row,type){
            const delParams = {
              type: type,
              id: this.detailId,
              delId: ''
            }
            // 数据删除
            if (type === 0) {
              //部件
              delParams.delId = row.id
            }
            if (type === 1) {
              // 工具工装
              delParams.delId = row.toolCode
            }
            if (type === 2) {
              // 辅料
              delParams.delId = row.accessoriesCode
            }
            axios.post(`${this.request_host}/system/pu/delPuRelationData`,delParams).then((response) => {
                if (response.status == 200) {
                  this.init()
                }
              })
          },
          // 上传成功回调
          handleUploadSuccess(response, file, fileList) {
            if (response.code === 200) {
              this.$message.success('上传成功');
              this.formInfo.puFile = response.data;
              // 更新文件列表，只显示文件名
              this.fileList = [{
                name: file.name,
                url: response.data
              }];
            } else {
              this.$message.error(response.msg || '上传失败');
            }
          },
          // 处理文件下载
          handleDownload(file) {
            if (file.url) {
              window.open(this.request_host + '/system/pu/download?filePath=' + encodeURIComponent(file.url));
            }
          },
          // 处理文件删除
          handleDeleteFile(file) {
            this.$confirm('确认删除该文件吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              axios.post(`${this.request_host}/system/pu/deleteFile`, {
                puCode: this.detailId,
                filePath: file.url
              }).then(response => {
                if (response.status == 200) {
                  this.$message.success('删除成功');
                  this.fileList = [];
                  this.formInfo.puFile = '';
                }
              }).catch(error => {
                console.error('删除失败:', error);
                this.$message.error('删除失败');
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          // 上传失败回调
          handleUploadError(err) {
            this.$message.error('上传失败');
            console.error('上传失败:', err);
          },
          // 上传前校验
          beforeUpload(file) {
            return true;
          },
          // 处理工具数量变更
          handleToolNumChange(row) {
            axios.post(`${this.request_host}/system/pu/updateToolNum`, {
              puCode: this.detailId,
              toolCode: row.toolCode,
              toolNum: row.toolNum
            }).then(response => {
              if (response.status == 200) {
                this.$message.success('保存成功');
              }
            }).catch(error => {
              console.error('保存失败:', error);
              this.$message.error('保存失败');
            });
          },
          // 处理工具数量变更
          handleAccessoriesNumChange(row) {
            axios.post(`${this.request_host}/system/pu/updateAccessoriesNum`, {
              puCode: this.detailId,
              accessoriesCode: row.accessoriesCode,
              accessoriesNum: row.accessoriesNum
            }).then(response => {
              if (response.status == 200) {
                this.$message.success('保存成功');
              }
            }).catch(error => {
              console.error('保存失败:', error);
              this.$message.error('保存失败');
            });
          },
          openMenu(url) {
            window.open(url)
          },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
      .mb8 {
            height: 30px;
        }
    </style>
  </body>
</html>
